<template>
  <!-- #ifdef H5 -->
  <el-radio-group v-model="bindValue" v-bind="$attrs">
    <template v-if="props.styleType !== 'button'">
      <el-radio v-for="item in options" :key="item.value" :label="item.value" :disabled="item.disabled">
        {{ item.label }}
      </el-radio>
    </template>
    <template v-else>
      <el-radio-button
        v-for="item in options"
        :key="item.value"
        :label="item.value"
        :disabled="item.disabled"
        :border="props.border"
      >
        {{ item.label }}
      </el-radio-button>
    </template>
  </el-radio-group>
  <!-- #endif -->
</template>
<script>
  export default {
    inheritAttrs: false,
  };
</script>
<script setup>
  // #ifdef H5
  import { ElRadioGroup, ElRadio, ElRadioButton } from "element-plus";
  import "element-plus/theme-chalk/el-radio-group.css";
  import "element-plus/theme-chalk/el-radio.css";
  import "element-plus/theme-chalk/el-radio-button.css";
  // #endif
  import { computed, watch, ref } from "vue";
  const props = defineProps({
    modelValue: {
      type: Boolean,
    },
    options: {
      type: Array,
    },
    props: {
      type: Object,
      default: () => ({
        styleType: "",
        border: false,
      }),
    },
  });
  const emits = defineEmits(["update:modelValue"]);
  const bindValue = computed({
    get() {
      return props.modelValue;
    },
    set(value) {
      emits("update:modelValue", value);
    },
  });
</script>
<style lang="scss" scoped></style>
